<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图形处理</title>
</head>
<body style="background-color: black;">
<canvas id="canvas" style="border: 1px solid gray;"></canvas>
<input type="range" value="1.0" id="scale" min="0.5" max="3.0" step="0.01" style="width: 800px;margin: 20px auto;"/>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var scaledom = document.getElementById("scale");
    var scale = scaledom.value;
    var cxt = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
        drawImageScale(scale);
    };

    window.onload = function () {
        canvas.width = 1152;
        canvas.height = 768;
        img.src = "img-lg.jpg";
    };

    function drawImageScale(scale) {
        var imgWidth = canvas.width*scale;
        var imgHeight = canvas.height*scale;
        var dx = canvas.width/2 - imgWidth/2;
        var dy = canvas.height/2 - imgHeight/2;
        cxt.drawImage(img,dx,dy,imgWidth,imgHeight);
    }
    scaledom.oninput = function () {
        scale = scaledom.value;
        cxt.clearRect(0,0,canvas.width,canvas.height);
        drawImageScale(scale);
    };
    var is_down = 0;
    canvas.onmousedown = function (e) {
        e.preventDefault();
        is_down = 1;
        var x = e.clientX;
        var y = e.clientY;
        var point = getCanvasPoint(x,y);
        drawCanvasBig(point);
    };
    canvas.onmousemove = function (e) {
      e.preventDefault();
        if(is_down) {
            var x = e.clientX;
            var y = e.clientY;
            var point = getCanvasPoint(x, y);
            drawCanvasBig(point);
        }else{
            clearCanvas();
        }
    };
    canvas.onmouseup = function (e) {
        e.preventDefault();
        is_down = 0;
        clearCanvas();
    };
    canvas.onmouseout = function (e) {
        e.preventDefault();
        is_down = 0;
        clearCanvas();
    };

    function getCanvasPoint(x,y) {
        var box = canvas.getBoundingClientRect();
        return {x:x-box.left,y:y-box.top};
    }

    function drawCanvasBig(point) {
        clearCanvas();
        scale = scaledom.value;
        var imgWidth = canvas.width*scale;
        off_scale = img.width/imgWidth;
        var off_width = point.x*off_scale;
        var off_height = point.y*off_scale;
        var mr = 100;
        var dx = off_width - mr;
        var dy = off_height - mr;
        var sx = point.x -mr;
        var sy = point.y - mr;
        cxt.save();
        cxt.lineWidth = 20;
        cxt.strokeStyle = "#069";
        cxt.beginPath();
        cxt.arc(point.x,point.y,mr,0,2*Math.PI);
        cxt.stroke();
        cxt.clip();
        cxt.drawImage( img , dx , dy , 2*mr , 2*mr , sx , sy , 2*mr , 2*mr );
        cxt.restore();
    }

    function clearCanvas() {
        scale = scaledom.value;
        cxt.clearRect(0,0,canvas.width,canvas.height);
        drawImageScale(scale);
    }
</script>
</html>